<template>
  <view>
    <!-- 搜索框 -->
    <Search></Search>

    <!-- 容器 -->
    <view class="container">
      <!-- 侧边栏 -->
      <scroll-view class="cate-sidebar"
                   scroll-y
                   scroll-with-animation>
        <view class="items"
              :class="{current:currentIndex===index}"
              v-for="(i,index) in caregories"
              @click="currentIndex=index"
              :key="i.cat_id">{{i.cat_name}}</view>
      </scroll-view>

      <!-- 内容 -->
      <scroll-view class="main"
                   scroll-y
                   scroll-with-animation>
        <view class="items"
              v-for="i in caregories[currentIndex].children"
              :key="i.cat_id">
          <view class="title">/ {{i.cat_name}} /</view>
          <view class="subs">
            <u-grid :col="3">
              <u-grid-item v-for="v in i.children"
                           :index="v.cat_id"
                           @click="gotoDetail()"
                           :key="v.cat_id">
                <u-image width="120rpx"
                         height="120rpx"
                         :src="v.cat_icon"></u-image>
                <text class="grid-text">{{v.cat_name}}</text>
              </u-grid-item>
            </u-grid>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import Search from '@/components/Search.vue'

export default {
  data() {
    return {
      caregories: [], // 分类数据
      currentIndex: 0, // 选中下标
    }
  },
  components: { Search },
  methods: {
    async getCategoriesFn() {
      const res = await this.$u.api.getCategoriesAPI()
      console.log(res)
      this.caregories = res
    },
    gotoDetail(id) {
      // console.log(id)
      uni.navigateTo({
        url: `/pages/goods_list/goods_list?id=${id}`,
      })
    },
  },
  created() {
    this.getCategoriesFn()
  },
}
</script>

<style lang="scss" scoped>
.cate-sidebar {
  width: 182rpx;
  height: 100%;
  background: #f3f3f3;
  .items {
    height: 50rpx;
    margin: 30rpx 0;
    font-size: 28rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFangSC-Medium;
    letter-spacing: 0;
    color: #585858;
    &.current {
      color: #ea4350;
      border-left: 5rpx solid #ea4350;
    }
  }
}
.container {
  width: 100vw;
  // background-color: pink;
  height: calc(100vh - 100rpx);
  display: flex;
}
.main {
  max-height: 100%;
  flex: 1;
  // background-color: pink;
  padding: 10rpx 50rpx;
  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    // background-color: tomato;
    width: 100%;
    font-size: 26rpx;
    margin-bottom: 35rpx;
    margin-top: 20rpx;
  }
  .grid-text {
    color: #2e2e2e;
    font-size: 21rpx;
    margin-top: 15rpx;
  }
}
</style>
